<!--欠费车辆-->
<template>
  <div class="common-body-wrapper">
    <search-header :isSetSingle="false" single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch"
    :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" v-if="isPermmited('PARKING_OPERATION:PARK_ARREAR_CAR:EXPORT')" @click.prevent="exportData()">导出</a>
          </div>
          <template slot="tdCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
                <span v-else-if="'duration' == props.prop">
                  {{ scope.row[props.prop] |formatTimeLength}}
                </span>
                <span v-else-if="'enterCarNoImageUrl' == props.prop">
                  <a v-if="scope.row['enterCarNoImageUrl'] && scope.row['enterCarImageUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['enterCarImageUrl'])">
                    <img class="carNoImage" style="width: 60px;height:30px;" alt="暂无" :src="scope.row.enterCarNoImageUrl" />
                  </a>
                  <a v-else-if="!scope.row['enterCarNoImageUrl'] && scope.row['enterCarImageUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['enterCarImageUrl'])">查看大图</a>
                  <span v-else>暂无图片</span>
                </span>
                <span v-else-if="'leaveCarNoImageUrl' == props.prop">
                  <a v-if="scope.row['leaveCarNoImageUrl'] && scope.row['leaveCarImageUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['leaveCarImageUrl'])">
                    <img class="carNoImage" style="width: 60px;height:30px;" alt="暂无" :src="scope.row.leaveCarNoImageUrl" />
                  </a>
                  <a v-else-if="!scope.row['leaveCarNoImageUrl'] && scope.row['leaveCarImageUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['leaveCarImageUrl'])">查看大图</a>
                  <span v-else>暂无图片</span>
                </span>
                <span class="row-href" v-else-if="'carCode'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)"  @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')">{{ scope.row[props.prop] }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <big-pic-modal ref="bigPicModal">
      <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt="" @error="imgError('../../', 'car', $event)">
    </big-pic-modal>

    <!-- 展示已绑定的车牌号 -->
    <basic-modal ref="bindingCarCodeModal" width="500" customeClass="">
        <h3 slot="title">车牌号</h3>
        <div class="modal-body" slot="modal-body">
          <p v-for="(item,index) in bindingCarCodeList">
            <span>逻辑卡号{{index+1}}：</span>
            <span>{{item.carCode}}</span>
            <span>({{item.cardCode}})</span>
          </p>
        </div>
        <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import park_arrear_car from "./js/park_arrear_car.js";
export default {
  name: 'parkArrearCar',
  mixins: [
    common,
    stardardList,
    invokeModal,
    images,
    park_arrear_car
  ],
  components: {
    BigPicModal
  },
  data() {
    const today = [
      new Date(moment().format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 23:59:59"))
    ];

    return {
      fixedCols: 3,
      total: 0,
      paramName: "parkIds",
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "datePicker",
          isShow: false,
          name: "query_time1",
          text: "欠费时间",
          propName: "arrearMarkTimeFrom,arrearMarkTimeTo",
          value: today,
          style: { width: "360px" }
        },
        { //复合型输入框
          isShow: false,
          type: "mixedInput",
          name: "carCode",
          text: "",
          value: "carCode",
          inputVal:"",
          style: { width: "70px" },
          isHandleChange: true,
          btnFlag: 'logicCardCode',
          options: [
            { name: "车牌号", value: "carCode" },
            { name: "卡票号", value: "cardCode" },
            { name: "自助码", value: "selfCode" },
            { name: "逻辑卡号", value: "logicCardCode" },
            { name: "卡面号码", value: "faceCardCode" }
          ]
        },
        {
          type: "datePicker",
          isShow: false,
          name: "query_time2",
          text: "补缴时间",
          propName: "tollCollectorTimeFrom,tollCollectorTimeTo",
          value: "",
          style: { width: "360px" }
        },
        {
          type: "select",
          isShow: false,
          name: "isBackPay",
          text: "补缴状态",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "是", value: "1" },
            { name: "否", value: "0" }
          ]
        },
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "parkName",
          text: "停车场",
        },
        {
          index: 2,
          isShow: false,
          prop: "carCode",
          text: "车牌号",
          initHidden: true,
        },
        {
          index: 3,
          isShow: false,
          prop: "enterTime",
          text: "进场时间",
        },
        {
          index: 4,
          isShow: false,
          prop: "cardCode",
          text: "卡号",
          initHidden: true,
        },
        {
          index: 5,
          isShow: false,
          prop: "enterCarCode",
          text: "进场车牌号",
        },
        {
          index: 6,
          isShow: false,
          prop: "enterCarNoImageUrl",
          text: "进场车牌图片",
          initHidden: true,
        },
        {
          index: 7,
          isShow: false,
          prop: "leaveTime",
          text: "离场时间",
          initHidden: true,
        },
        {
          index: 9,
          isShow: false,
          prop: "leaveCarCode",
          text: "离场车牌号",
          initHidden: true,
        },
        {
          index: 10,
          isShow: false,
          prop: "leaveCarNoImageUrl",
          text: "离场车牌图片",
          initHidden: true,
        },
         {
          index: 11,
          isShow: false,
          prop: "duration",
          text: "停车时长",
        },
        {
          index: 12,
          isShow: false,
          prop: "totalValue",
          text: "停车费用",
        },
        {
          index: 13,
          isShow: false,
          prop: "paidCouponValue",
          text: "已优惠金额",
          initHidden: true,
        },
        {
          index: 13,
          isShow: false,
          prop: "paidRealValue",
          text: "已缴金额",
        },
        {
          index: 14,
          isShow: false,
          prop: "arrearCouponValue",
          text: "当前优惠",
          initHidden: true,
        },
        {
          index: 15,
          isShow: false,
          prop: "arrearRealValue",
          text: "当前欠费",
        },
        {
          index: 16,
          isShow: false,
          prop: "backRealValue",
          text: "补缴金额",
          initHidden: true,
        },
        {
          index: 17,
          isShow: false,
          prop: "isBackPayStr",
          text: "补缴状态",
          initHidden: true,
        },
        {
          index: 18,
          isShow: false,
          prop: "tollCollectorName",
          text: "收费员",
          initHidden: true,
        },
         {
          index: 19,
          isShow: false,
          prop: "tollCollectorTime",
          text: "补缴时间",
          initHidden: true,
        }
        // {
        //   index: 19,
        //   isShow: false,
        //   prop: "paidParkName",
        //   text: "缴费停车场名称",
        //   initHidden: true,
        // },
      ],
      tbodysInfo: []
    };
  },
  methods: {}
};
</script>

<style lang="less" scoped>
</style>
